<template lang="html">
  <div>

    <div style="padding-left:14px;">
      <i class="iconfont iconicon- cCCC"></i>
      {{imgTips?'选中图片，点击此按钮，可以调整图片尺寸':'上传图片'}}
    </div>
    <div ref="editor" ></div>
    <!-- <div class="lineH2 f_18 cRed">请勿直接从word文档中直接拷贝，粘贴内容。会包含隐形的特殊字符，导致交官失败。</div> -->
  </div>
</template>

<style>
.w-e-text-container .w-e-panel-container{
  left:0 !important;
  margin-left:0 !important;
}
</style>

<script>
import E from "wangeditor";
export default {
  name: "wangEditor",
  data() {
    return {
      imgTips:false,
      editor: null //富文本编辑器 容器
    };
  },

  //https://blog.csdn.net/qq_37860634/article/details/104098310
  model: {
    prop: "value",
    event: "change"
  },
  props: {
    value: {
      type: String,
      default: ""
    }
  },
  watch: {
    value(newVal,oldVal) {
      // console.log(newVal)
      if(newVal.indexOf('\<img')>-1){
        this.imgTips=true;
      }else{
        this.imgTips=false;
      }
    }
  },
  created() {},
  mounted() {
    this.seteditor();
  },
  methods: {
    seteditor() {
      this.editor = new E(this.$refs["editor"]); //实例化编辑器

      this.editor.customConfig.menus = [
          'image',  // 插入图片
          // 'head',  // 标题
          // 'bold',  // 粗体
          // 'fontSize',  // 字号
          // 'fontName',  // 字体
          // 'italic',  // 斜体
          // 'underline',  // 下划线
          // 'strikeThrough',  // 删除线
          // 'foreColor',  // 文字颜色
          // 'backColor',  // 背景颜色
          // 'link',  // 插入链接
          // 'list',  // 列表
          // 'justify',  // 对齐方式
          // 'quote',  // 引用
          // 'emoticon',  // 表情
          // 'table',  // 表格
          // 'video',  // 插入视频
          // 'code',  // 插入代码
          // 'undo',  // 撤销
          // 'redo'  // 重复
      ]; // 配置菜单

      this.editor.customConfig.zIndex = 20;//层
      this.editor.customConfig.showLinkImg = false;// 隐藏“网络图片”tab
      this.editor.customConfig.customAlert =  (info)=>{
        // info 是需要提示的内容
        $app.alert(info);
      }




      this.editor.customConfig.customUploadImg =  (files, insert)=>{
          // files 是 input 中选中的文件列表
          // insert 是获取图片 url 后，插入到编辑器的方法

          console.log(files)
          for (let i in files) {
            let file = files[i];
            if ($app.judgeData(file.size)) {
              let string = $app.toLower(file.name); //取文件后后缀名
              let jud = /(jpeg|jpg|png)$/i.test(string);

              if(jud){
                //10专利补正文件,11专利oa文件
                $app.selectFileImage(800,null,file, 10, resData => {
                  console.log('恭喜发财 = ',resData)
                  // 上传代码返回结果之后，将图片插入到编辑器中
                  insert(resData.file_url)
                }); 
              }else{
                $app.toast('请选择 .jpg 格式', false);
              }
            }
          };


          
      }

      // this.editor.customConfig.uploadImgServer = '/api/upload/index';
      // this.editor.customConfig.uploadImgHeaders = {
      //   'X-FUWUMAO-TOKEN':$app.getLocal('token').token
      // }; // 自定义header
      // this.editor.customConfig.uploadFileName = "file"; // 后端接受上传文件的参数名
      // this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024; // 将图片大小限制为（默认最大支持2M）
      // this.editor.customConfig.uploadImgMaxLength = 1; // 限制一次最多上传6张图片
      // this.editor.customConfig.uploadImgTimeout = 1 * 60 * 1000; // 设置超时时间（默认1分钟）
      
      // this.editor.customConfig.uploadImgParams = {
      //     upload_type: 10 //10专利补正文件,11专利oa文件
      // };
      // this.editor.customConfig.uploadImgHooks = {
      //   before: (xhr, editor, files) => {
      //       // 图片上传之前触发
      //       // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
      //       for (let i in files) {
      //         let file = files[i];
      //         if ($app.judgeData(file.size)) {
      //           let string = $app.toLower(file.name); //取文件后后缀名
      //           let jud = /(jpg)$/i.test(string);
      //           if(!jud){
      //             // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
      //             return {
      //               prevent: true,
      //               msg: '请上传后 .jpg 文件'
      //             }
      //           }
      //         }
      //       };
      //   },
      //   fail: (xhr, editor, result) => {
      //     // 插入图片失败回调
      //   },
      //   success: (xhr, editor, result) => {
      //     // 图片上传成功回调
      //   },
      //   timeout: (xhr, editor) => {
      //     // 网络超时的回调
      //   },
      //   error: (xhr, editor) => {
      //     // 图片上传错误的回调
      //   },
      //   customInsert: (insertImg, result, editor) => {
      //     // console.log('图片上传成功 = ',insertImg, result, editor)
      //     $app.ajaxBackDo('/api/upload/index',result,({data})=>{
      //       // 图片上传成功，插入图片的回调
      //       insertImg((data.file_url));
      //     });
      //   }
      // };
      


      this.editor.customConfig.onchange = html => {
        this.$emit("change", html); // 将内容同步到父组件中
      };

      

      // 过滤粘贴的内容
      this.editor.customConfig.pasteTextHandle = function(content) {
        // console.log(content)

        /******
         * 再次判断 word里面拷贝过来的图片 =》丢掉。
         * 通过上传的手段得到的图片=》要
         * */ 
        let contentLower=$app.delSpace(content.toLowerCase());//转换成小写更加容易判断 => 再删除所有空格
        let judA=contentLower.indexOf('<html')> -1;//网页、pdf 拷贝粘贴
        let judB=contentLower.indexOf('</xml>')> -1;//office、wps 拷贝粘贴
        let judC=contentLower.indexOf('</body>')> -1;//网页、pdf、office、wps 公共
        // console.log('<html> = ',judA)
        // console.log('<xml> = ',judB)
        // console.log('<body> = ',judC)


        // content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回
        if (content == "" && !content) return "";
        let str = content;

        // 网页、pdf、office、wps =》拷贝原判断
        if(judA || judB || judC){
          
          //处理的标签里的多余代码
          str = str.replace(/<xml>[\s\S]*?<\/xml>/gi, "");
          

          str = str.replace(/(\\n|\\r| class=(")?Mso[a-zA-Z]+(")?)/g, "");
          let reg = new RegExp("<!--(.*?)-->", "g");
          str = str.replace(reg, "");
          
          str = str.replace(/<style>[\s\S]*?<\/style>/gi, "");
          // str = str.replace(/<[^img]{3}\/?[^>]*>/gi, "");//俊杰兄修改=》还有点小问题
          str = str.replace(/<\/?[^>]*>/g, '')
          str = str.replace(/[ | ]*\n/g, "\n");
          str = str.replace(/&nbsp;/gi, "");
          
          // console.log('富文本的content',JSON.parse(JSON.stringify(content)))
          // console.log('****str修改后的content str', str)
          
        }else{
          //干净格式粘贴=》不做处理
        }

        return str;

      };

      this.editor.create(); // 创建富文本编辑器
    },
    //清除
    clear() {
      this.$emit("change", ""); // 将内容同步到父组件中
      this.editor.txt.clear(); //清除文本
    },
    //设置内容
    setHtml(html) {
      this.editor.txt.html(html);
      this.$emit("change", html); // 将内容同步到父组件中
    }
  }
};
</script>